<template>
    <div class="boxContentCss">
        <el-form ref="formRef" :model="form"  label-position="right" label-width="110px">
            <EdCreateCard title="修改规则">
                <template #back>
                    <div class="createBack" @click="$utilsSet.goBack($router)" >
                        <svg-icon icon-class="back" /> 返回
                    </div>
                </template>
                <div class="zh_black">
                    <el-form-item label="规则名称" prop="ruleName" :rules="$validate.validates({required:true,msg:'规则名称不能为空'})">
                        <el-input v-model="form.ruleName" style="max-width: 600px" placeholder="输入规则名称" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="兑换比例" prop="convertType" class="itemRadioBlock" :rules="$validate.validates({required:true,msg:'兑换比例不能为空'})">
                        <el-radio-group @change="changeRadio" v-model="form.convertType">
                            <el-radio class="block marginBottom10"  :label="0">按金额，缴费每满
                                1 元，等于
                                <el-input  style="width: 80px" :disabled="form.convertType != 0" v-model="form.convertTypeMoneyName2" @input="form.convertTypeMoneyName2 = $validate.check_num(form.convertTypeMoneyName2,'start',0,999999)" placeholder="请输入" class="inputStyle" size="small" maxlength="10"></el-input>积分</el-radio>
                            <el-radio class="block marginBottom10"  :label="1">按次数，参加活动
                                1次，等于
                                <el-input  style="width: 80px" :disabled="form.convertType != 1" v-model="form.convertTypeSecondName2" @input="form.convertTypeSecondName2 = $val渠道规则不存在idate.check_num(form.convertTypeSecondName2,'start',0,999999)" placeholder="请输入" class="inputStyle" size="small" maxlength="10"></el-input>积分</el-radio>
                            <el-radio class="block" :label="2">按重量，重量每满
                                50g，等于
                                <el-input  style="width: 80px" :disabled="form.convertType != 2" v-model="form.convertTypeHeavyName2" @input="form.convertTypeHeavyName2 = $validate.check_num(form.convertTypeHeavyName2,'start',0,999999)" placeholder="请输入" class="inputStyle" size="small" maxlength="10"></el-input>积分</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="积分有效期" prop="effectiveType" class="itemRadioBlock" :rules="$validate.validates({required:true,msg:'积分有效期不能为空'})">
                        <el-radio-group @change="changeTimeRadio" v-model="form.effectiveType">
                            <el-radio class="block marginBottom10" :label="0">永久有效</el-radio>
                            <el-radio class="block marginBottom10" :label="1">自发放日三个月有效</el-radio>
                            <el-radio class="block marginBottom10" :label="2">
                                自定义
                                <el-date-picker
                                        :disabled="form.effectiveType != 2"
                                        v-model="form.time"
                                        :picker-options="pickerOptions"
                                        type="date"
                                        placeholder="选择日期">
                                </el-date-picker>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item class="itemLineHeight" label="单日用户最大领取积分数" prop="maxPointDay" :rules="$validate.validates({required:true,msg:'输入单日用户最大领取积分数不能为空'})">
                        <el-input  style="max-width: 600px" v-model="form.maxPointDay" placeholder="输入单日用户最大领取积分数" maxlength="10"></el-input>
                    </el-form-item>
                    <el-form-item class="paddingBottom145">
                        <el-button type="primary" @click="onSubmit('formRef')" :loading="disabled">保存</el-button>
                        <el-button @click="reset" class="Class1MarginLeft8">重置</el-button>
                    </el-form-item>
                </div>
            </EdCreateCard>
        </el-form>
    </div>
</template>

<script>
    import EdCreateCard from 'src/components/EdCreateCard.vue'
    import {updateRule ,queryRuleOne} from "src/api/activity"
    import moment from 'moment'
    export default {
        name: "RuleUpdate",
        components:{
            EdCreateCard
        },
        data(){
            return{
                form:{
                    ruleName:"",
                    convertType:null,
                    effectiveType:null,
                    time:"",
                    maxPointDay:"",
                    convertTypeMoneyName1:"",
                    convertTypeMoneyName2:"",
                    convertTypeSecondName1:"",
                    convertTypeSecondName2:"",
                    convertTypeHeavyName1:"",
                    convertTypeHeavyName2:"",
                    opposite:[]
                },
                disabled:false,
                pickerOptions:{}
            }
        },
        mounted(){
            this.pickerOptions = {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                },
            }
            queryRuleOne({ruleId:this.$route.query.ruleId}).then(response => {
                if(response.code == 20000) {
                    this.form = {
                        ruleName:response.data.ruleName,
                        convertType:response.data.convertType,
                        effectiveType:response.data.effectiveType,
                        time:response.data.effectiveEnd ? moment(response.data.effectiveEnd).format("YYYY-MM-DD") : "",
                        maxPointDay:response.data.maxPointDay,
                        convertTypeMoneyName1:"",
                        convertTypeMoneyName2:"",
                        convertTypeSecondName1:"",
                        convertTypeSecondName2:"",
                        convertTypeHeavyName1:"",
                        convertTypeHeavyName2:"",
                        opposite:[],
                        id:response.data.id
                    };
                    if(this.form.effectiveType != 2){
                        this.form.time = ""
                    }

                    switch (response.data.convertType) {
                        case 0 :
                            // this.form.convertTypeMoneyName1 = response.data.opposite;
                            this.form.convertTypeMoneyName2 = response.data.quantity;
                            break;
                        case 1 :
                            // this.form.convertTypeSecondName1 = response.data.opposite;
                            this.form.convertTypeSecondName2 = response.data.quantity;
                            break;
                        case 2 :
                            // this.form.convertTypeHeavyName1 = response.data.opposite;
                            this.form.convertTypeHeavyName2 = response.data.quantity;
                            break;
                    }
                }
            })
        },
        methods:{
            changeRadio(){
                switch (this.form.convertType) {
                    case 0 :
                        this.form.convertTypeSecondName2 = "";
                        this.form.convertTypeHeavyName2 = "";
                        break;
                    case 1 :
                        this.form.convertTypeMoneyName2 = "";
                        this.form.convertTypeHeavyName2 = "";
                        break;
                    case 2 :
                        this.form.convertTypeMoneyName2 = "";
                        this.form.convertTypeSecondName2 = "";
                        break;
                    default:
                        this.form.opposite = [];
                        break;
                }
            },
            changeTimeRadio(){
                if(this.form.effectiveType != 2){
                    this.form.time = "";
                }
            },
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {

                    if (valid) {
                        let query = this.form.copy();
                        switch (this.form.convertType) {
                            case 0 :
                                query.opposite = [1,this.form.convertTypeMoneyName2];
                                if(!this.form.convertTypeMoneyName2){
                                    this.messageFn("请输入兑换比例");
                                    return
                                }
                                break;
                            case 1 :
                                query.opposite = [1,this.form.convertTypeSecondName2];
                                if(!this.form.convertTypeSecondName2){
                                    this.messageFn("请输入兑换比例");
                                    return
                                }
                                break;
                            case 2 :
                                query.opposite = [50,this.form.convertTypeHeavyName2];
                                if(!this.form.convertTypeHeavyName2){
                                    this.messageFn("请输入兑换比例");
                                    return
                                }
                                break;
                            default:
                                query.opposite = [];
                                break;
                        }
                        if(query.effectiveType == 2){
                            if(this.form.time == "" || this.form.time == null || this.form.time == undefined){
                                this.messageFn("请选择自定义时间");
                                return
                            }else {
                                query.customize = moment(this.form.time).format("YYYY-MM-DD");
                                if(!query.customize){
                                    this.messageFn("请选择自定义时间");
                                    return
                                }
                            }
                        }

                        delete query.convertTypeMoneyName1;
                        delete query.convertTypeMoneyName2;
                        delete query.convertTypeSecondName1;
                        delete query.convertTypeSecondName2;
                        delete query.convertTypeHeavyName1;
                        delete query.convertTypeHeavyName2;
                        delete query.time;

                        this.disabled = true;
                        window.setTimeout(() => {
                            this.disabled = false
                        }, 2000);

                        console.log("query",query)
                        updateRule(query).then(response => {
                            if(response.code == 20000) {
                                this.$message.success({
                                    message: '已成功添加积分规则 即将返回积分规则列表',
                                    duration: 2000,
                                    center:true
                                });

                                window.setTimeout(() => {
                                    this.$utilsSet.goBack(this.$router);
                                }, 600)
                            }
                        })
                    }
                })
            },
            messageFn(msg){
                this.$message.info({
                    message: msg,
                    duration: 2000,
                    center:true
                });
            },
            reset(){
                this.form = {
                    ruleName:"",
                    convertType:null,
                    effectiveType:null,
                    time:"",
                    maxPointDay:"",
                    convertTypeMoneyName1:"",
                    convertTypeMoneyName2:"",
                    convertTypeSecondName1:"",
                    convertTypeSecondName2:"",
                    convertTypeHeavyName1:"",
                    convertTypeHeavyName2:"",
                    opposite:[],
                    id:this.$route.query.ruleId
                }
            }
        }
    }
</script>

<style lang="scss">
    .main-container{
        .app-main{
            .container-box-container-margin {
                .el-form{
                    .itemLineHeight.el-form-item--small {
                        .el-form-item__label{
                            line-height: 1.3 !important;
                        }
                    }
                    .itemRadioBlock{
                        .el-form-item__content{
                            .el-radio{
                                display: block !important;
                                margin:0 0 10px 0;
                                .inputStyle{
                                    width: 80px;
                                    margin: 0 5px
                                }
                            }
                        }
                    }
                }
            }
        }
    }

</style>